><template>
    <div class="dh_xgj_inform">
        <!-- 公告提交 -->
        <div :class=" inform ===true ? 'd_x_in-affiche' : 'd_x_in-p46' ">

            <el-form ref="form" :model="form" label-width="100px" v-if="inform">

                <el-form-item label="发布通知标题">
                    <el-input v-model="form.title" placeholder="请在此处输入要提交的通知标题"></el-input>
                </el-form-item>

                <el-form-item label="发布通知时间">
                    
                    <el-date-picker
                    v-model="form.time"
                    align="right"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择通知日期"
                    :picker-options="pickerOptions">
                    </el-date-picker>
                </el-form-item>

                <el-form-item label="发布通知标题">
                    <el-input v-model="form.content" type="textarea" :rows="7" placeholder="请输入通知的内容..."></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="upaffiche">上传通知</el-button>
                </el-form-item>

            </el-form>
            

            <div class="d_x_i-a-btn tc" @click="informadd" v-else>点这里新增通知!</div>

        </div>

        <!-- 公告内容 -->
        <div class="d_x_in-box" v-for="(item,key) in notice" :key="key">
            <i class="d_x_i-b-icon" v-if="datetime === formatDatea(item.time*1000)"></i>
            <h1>{{item.title}}</h1>
        <div class="d_x_i-b-time"><span>校管理官方</span><span>{{item.time*1000 | formatDate}} {{item.time*1000 | formatDateBehind}}</span></div>
            <div class="d_x_i-b-text"><p>{{item.content}}</p></div>
        </div>

    </div>
</template>

<script>

import {date} from '../js/time.js';  			 //用于时间戳转换时间
import {timetamp} from '../js/time.js'		 //用户日期转时间戳
import {formatDate} from '../js/time.js';		 //直接在标签中转化时间的方法
export default {
    components: {},
    data() {
        return {
            inform: false,              //添加通知的状态(显示隐藏)
            login: {} ,                 //用户名密码
            notice: [],                 //通知数组
            // 新增通知的绑定值
            form:{
                title: '',
                time: '',
                content: '',
            },
            // 时间选择的限制，不能大于今天
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
                shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                    picker.$emit('pick', new Date());
                    }
                }]
            },
            datetime: '',
        };
    },
    filters: {
        formatDate(time) {							 //日期(年月日)
            var date = new Date(time);
            return formatDate(date, 'yyyy-MM-dd');   //年月日 格式自己定义   'yyyy : MM : dd'  例 2018年12月5日的格式
        },
        formatDateBehind(time) {					 //时间(时分秒)
            var date = new Date(time);
            return formatDate(date, 'hh:mm:ss');     //时间点 例 21点12分12秒的格式
        },
    },
    computed: {},
    watch: {},
    methods: {
        // 方法中的过滤器
        formatDatea(time) {							 //日期(年月日)
            var date = new Date(time);
            return formatDate(date, 'yyyy-MM-dd');   //年月日 格式自己定义   'yyyy : MM : dd'  例 2018年12月5日的格式
        },
        // 获取公告
        requestdata(){
            const that = this;
            let axios = require('axios');
            let data = {name:that.login.uname,password:that.login.pwd}
            let updata = JSON.stringify(data)
            // console.log(data,updata)
            axios({
                method: 'post',
                url: '/api/api/dh_school/b_notice.php',
                headers: { "Content-Type": "appliction/JSON" },
                data: updata
            })
            .then( resp=> {
                // console.log(resp)
                that.notice = resp.data.data
            })
            .catch( err=> { 
                // console.log(err)
            })
        },

        // 新增通知的按钮
        informadd(){
            this.inform = !this.inform
        },
        // 上传公告
        upaffiche(){
            const that = this;
            let axios = require('axios');
            if(that.form.title === ''){
                this.$message.error('上传标题不能为空');
            }else if(that.form.time === ''){
                this.$message.error('上传时间不能为空');
            }else if(that.form.content === ''){
                this.$message.error('上传内容不能为空');
            }else{
                let uptime = String(timetamp(that.form.time))
                // that.form.time = uptime; 这里报错一直找不到原因
                let data = {
                    name:that.login.uname,
                    password:that.login.pwd,
                    time: uptime,
                    title: that.form.title,
                    content: that.form.content
                }
                let updata = JSON.stringify(data)
                // console.log(data,updata)
                this.$confirm('请再次确认新增通知的内容，提交后无法修改', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    center: 'true'
                })
                .then(() => {
                    axios({
                        method: 'post',
                        url: '/api/api/dh_school/b_addnotice.php',
                        headers: { "Content-Type": "appliction/JSON" },
                        data: updata
                    })
                    .then( resp=> {
                        // console.log(resp)
                        this.inform = !this.inform
                        that.notice.splice(0,0,data)
                    })
                    .catch( err=> { 
                        // console.log(err)
                    })
                    this.$message({
                        type: 'success',
                        message: '提交成功!'
                    });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消提交'
                    });          
                });
            }
        }
    },
    created() {},
    mounted() {
        const that = this;
        that.login = JSON.parse(sessionStorage.getItem("dh_xgj_login"));
        that.requestdata()
        that.datetime = date(Date.parse(new Date()));
    },
    beforeCreate() {},
    beforeMount() {},
    beforeUpdate() {},
    updated() {},
    beforeDestroy() {},
    destroyed() {},
    activated() {},
    }
</script>
<style scoped>
/* @import url(); 引入公共css类 */
    .dh_xgj_inform{
        height: 100%;
    }
    /* 公告提交 */
    .d_x_in-affiche{
        text-align: left;
        width: 80%;
        margin: 0 auto 60px;
        padding: 40px 60px;
        background-color: white;
        border-radius: 3px;
        box-shadow: 1px 0 10px rgb(12, 12, 12);
        box-sizing: border-box;
    }
    .d_x_in-p46{
        text-align: left;
        width: 80%;
        margin: 0 auto 60px;
        /* padding: 40px 60px; */
        line-height: 100px;
        background-color: white;
        border-radius: 3px;
        box-shadow: 1px 0 10px rgb(12, 12, 12);
        box-sizing: border-box;
        background-color: #40a0ff60;
        color: white;
    }
    .d_x_i-a-btn{
        width: 100%;
        height: 100%;
        font-size: 20px;
    }
    /* 公告内容 */
    .d_x_in-box{
        position: relative;
        width: 80%;
        margin: 0 auto 60px;
        padding: 40px 60px;
        background-color: white;
        border-radius: 3px;
        box-shadow: 1px 0 10px rgb(12, 12, 12);
        box-sizing: border-box;
    }
	.d_x_i-b-icon{
        position: absolute;
        top: -5px;
        left: -5px;
		width: 50px;
        height: 50px;
        vertical-align: middle;
		/* margin: 10px 0 30px 0; */
        background: url(../assets/new.png) no-repeat 96% 96%;
        /* background-size: 106% 106%; */
	}
    .d_x_in-box>h1{
        font-size: 22px;
        margin-bottom: 30px;
    }
    .d_x_i-b-time{
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        width: 300px;
        margin: 0 auto 40px;
        font-size: 15px;
        vertical-align: text-bottom;
    }
    .d_x_i-b-time>span:nth-child(1){
        color: #0087c5;
        font-size: 17px;
    }
    .d_x_i-b-text{
        text-align: left;
        text-indent:2em;
        font-size: 16px;
        line-height: 40px;
    }

</style>